<template>
    <a-row>
        <a-col :span="4">
            <a-button type="primary" @click="modal.type='add',modal.editSal={},modal.open=true">添加工资账套</a-button>
        </a-col>
    </a-row>
    <a-row>
        <a-col>&nbsp;</a-col>
    </a-row>
    <a-table :columns="table.columns" :data="table.data" :loading="table.loading"
             :bordered="{headerCell:true}" :scroll="{x:2000}"
    >
        <template #optional="{record}" style="border-left: 1px solid black">
            <a-row :gutter="8" align="center" justify="center">
                <a-col :span="6">
                    <a-button type="primary" @click="modal.type='edit',modal.editSal=record,modal.open=true">编辑
                    </a-button>
                </a-col>
                <a-col :span="6">
                    <a-button type="primary" status="danger" @click="delModal.data=record,delModal.open=true">删除
                    </a-button>
                </a-col>
            </a-row>
        </template>
    </a-table>
    <a-modal :visible="modal.open" :title="modal.title" @cancel="modal.open=false" :footer="false" fullscreen>
        <SalForm :type="modal.type" :editSal="modal.editSal"
                 @success="modal.open=false,getAllSalarys()" @cancel="modal.open=false"
        ></SalForm>
    </a-modal>
    <DWM :open="delModal.open" :name="delModal.data.name"
         @ok="delSal" @cancel="delModal.open=false"
    ></DWM>
    <!--老师用的步骤条实现的增加和修改,我觉得在这里不实用,而且我也会使用步骤条,因此就不照着做了-->
    <!--modal没有实现完,剩下的很简单了,只需要添加form字段即可-->
</template>

<script>
    import SalForm from '../../components/sal/SalForm'
    import DWM from '../../components/common/DelWarnModal'

    export default {
        name: "",
        components: {
            SalForm,
            DWM
        },
        data() {
            return {
                table: {
                    open: false,
                    columns: [
                        {title: '名称', dataIndex: 'name', fixed: 'left', width: 100},
                        {title: '启用时间', dataIndex: 'createDate'},
                        {title: '基本工资', dataIndex: 'basicSalary'},
                        {title: '奖金', dataIndex: 'bonus'},
                        {title: '午餐补助', dataIndex: 'lunchSalary'},
                        {title: '交通补助', dataIndex: 'trafficSalary'},
                        {title: '应发工资', dataIndex: 'allSalary'},
                        {
                            title: '养老金',
                            children: [
                                {title: '基数', dataIndex: 'pensionBase'},
                                {title: '比率', dataIndex: 'pensionPer'},
                            ]
                        },
                        {
                            title: '医疗',
                            children: [
                                {title: '基数', dataIndex: 'medicalBase'},
                                {title: '比率', dataIndex: 'medicalPer'},
                            ]
                        }, {
                            title: '公积金',
                            children: [
                                {title: '基数', dataIndex: 'accumulationFundBase'},
                                {title: '比率', dataIndex: 'accumulationFundPer'},
                            ]
                        },
                        {title: '操作', slotName: 'optional', width: 300, fixed: 'right'},
                    ],
                    data: []
                },
                modal: {
                    type: 'add',
                    title: '添加账套',
                    open: false,
                    editSal: {}
                },
                delModal: {
                    open: false,
                    data: {name: ''}
                }
            }
        },
        methods: {
            getAllSalarys() {
                this.$get(this.requestUrl.getAllSalarys.url).then(res => {
                    this.table.data = res.obj
                })
            },
            delSal() {
                this.$delete(this.requestUrl.delSalary.url + this.delModal.data.id).then(res => {
                    if (res) {
                        this.$message.success(res.message)
                        this.getAllSalarys()
                        this.delModal.open = false
                    }
                })
            }
        },
        mounted() {
            this.getAllSalarys()
        }
    }
</script>

<style scoped>

</style>
